<template>

  <div class="independent-msg-nav">
    <div class="title">自主留言</div>
    <!-- 返回按钮 -->
    <img src="../../assets/images/jiantou_left.png" alt="返回按钮" class="back-button" @click="goBack" />
  </div>
  
  <div class="independent-msg-view">
    <!-- 反馈分类 -->
    <div class="feedback-category">
      <label for="category">反馈分类：</label>
      <van-radio-group v-model="feedback.category" class="radio-group">
        <van-radio name="平台功能反馈">平台功能反馈</van-radio>
        <van-radio name="订单反馈">订单反馈</van-radio>
      </van-radio-group>
    </div>

    <!-- 反馈订单号 -->
    <div v-if="feedback.category === '订单反馈'" class="feedback-order-id">
      <label for="orderId">反馈订单号：</label>
      <input type="text" id="orderId" v-model="feedback.orderId" placeholder="请输入订单号" />
    </div>

    <!-- 详细描述 -->
    <div class="feedback-description">
      <label for="description">详细描述：</label>
      <textarea id="description" v-model="feedback.description" placeholder="请输入详细描述"></textarea>
    </div>

    <!-- 提交反馈 -->
    <div class="submit-button-container">
      <button @click="submitFeedback" class="submit-button">提交反馈</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive,onMounted  } from "vue";
import { useRouter } from "vue-router";
import { addFeedback } from "../../api/Feedback/index";
import { showToast } from 'vant';

const router = useRouter();

const feedback = reactive({
  category: "平台功能反馈",
  orderId: "",
  description: ""
});
const userId = ref<number | null>(null);
// 从本地存储获取用户ID
onMounted(() => {
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    const userData = JSON.parse(storedUser).user;
    userId.value = userData.userId;
  }
});

// 返回到意见反馈页面
const goBack = () => {
  router.push("/feedback");
};

// 提交反馈
const submitFeedback = async () => {
  try {
    const response = await addFeedback({
      userId: userId.value,
      message: feedback.description,
      category: feedback.category,
      orderId: feedback.category === "订单反馈" ? Number(feedback.orderId) : 0
    });
    if (response.data.code === 200) {
      showToast("反馈提交成功！");
      router.push("/history");
    } else {
      showToast("反馈提交失败：" + response.data.message);
    }
  } catch (error) {
    console.error("反馈提交失败:", error);
    showToast("反馈提交失败，请稍后再试");
  }
};

</script>

<style lang="less" scoped>
.independent-msg-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px; 
}
.independent-msg-view {
   padding-top: 20px;
   padding-bottom: 20px;
  background-color: #fff;
  margin-top: 130px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 20px;
}

.title {
  font-size: 18px; 
  text-align: center;
  margin-top: 10px;
}
.back-button {
  position: absolute;
  left: 10px; 
  width: 34px; 
  height: 34px; 
  margin-top: 10px;
}

.feedback-category,
.feedback-order-id,
.feedback-description {
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input,
textarea {
  width: 350px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* 确保宽度一致 */
}

textarea {
  height: 100px;
}

.radio-group {
  display: flex;
  gap: 20px; /* 设置单选框之间的间距 */
}


.submit-button-container {
  display: flex;
  justify-content: center; /* 按钮居中 */
}
.submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>